<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>发起【{{ processName }}】流程</span>
      </div>
      <el-col :span="24">
        <el-form ref="form" :model="form" :rules="rules" label-width="100px">
          <el-row>
            <el-col :span="24">
              <el-form-item label="申请人" prop="userName">
                <el-input v-model="form.userName" show-word-limit :maxlength="100" placeholder="请输入申请人名称"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="厂区" prop="factoryName">
                <el-input v-model="form.factoryName" disabled show-word-limit :maxlength="100"
                          placeholder="请输入厂区名称"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="申请部门" prop="deptName">
                <el-input v-model="form.deptName" disabled show-word-limit :maxlength="100"
                          placeholder="请输入申请部门名称"/>
              </el-form-item>
            </el-col>

          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="隐患区域" prop="riskArea">
                <el-select v-model="form.riskArea" placeholder="请选择隐患区域">
                  <el-option
                    v-for="dict in dict.type.work_risk_area"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="隐患类别" prop="riskType">
                <el-select v-model="form.riskType" placeholder="请选择隐患类别">
                  <el-option
                    v-for="dict in dict.type.work_risk_type"
                    :key="dict.value"
                    :label="dict.label"
                    :value="dict.value"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="上传图片" prop="image">
                <image-upload v-model="form.image"/>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="24">
              <el-form-item label="备注" prop="remark">
                <el-input v-model="form.remark" show-word-limit :maxlength="255" :rows="4" placeholder="请输入备注"
                          type="textarea"/>
              </el-form-item>
            </el-col>
          </el-row>

          <el-form-item>
            <el-button type="primary"
                       @click="submitForm(1)">提 交</el-button>
            <el-button type="primary" @click="submitForm(0)">保 存</el-button>
            <el-button @click="cancel">取 消</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-card>

    <el-collapse v-if="!disable">
      <el-collapse-item title="流程图">
        <el-card class="box-card">
          <process-viewer :key="`designer-${definitionId}`" :xml="xmlData" :style="{height: '700px'}"/>
        </el-card>
      </el-collapse-item>
    </el-collapse>

  </div>
</template>

<script>
import {getBpmnXml} from '@/api/workflow/process'
import Parser from '@/utils/generator/parser'
import ProcessViewer from '@/components/ProcessViewer'
import {getUserProfile} from "@/api/system/user";
import {addRisk} from "@/api/work/risk";

export default {
  name: 'InsertRisk',
  dicts: ['work_risk_area', 'work_risk_type'],
  components: {
    Parser,
    ProcessViewer
  },
  data() {
    return {
      definitionId: null,
      disable: false,
      processName: null,
      xmlData: null,

      // 表单参数
      form: {},
      // 表单校验
      rules: {
        userName: [
          {required: true, message: '请输入申请人', trigger: 'blur'},
        ],
        image: [
          {required: true, message: '请上传图片', trigger: 'blur'},
        ],
      },
      userData: {}
    }
  },
  created() {
    this.disable = this.$route.query && eval(this.$route.query.disable || false);
    this.reset();
    if (this.disable) {
      // 获取用户个人数据
      getUserProfile().then(response => {
        // 用户数据
        this.form.userId = this.userData.userId
        this.form.deptId = this.userData.deptId
        this.form.deptName = this.userData.dept.deptName
        this.form.userName = this.userData.nickName
        this.form.factoryId = this.userData.factoryId
        this.form.factoryName = this.userData.factory.factoryName
      })
    } else {
      this.definitionId = this.$route.query && this.$route.query.definitionId;
      this.processName = this.$route.query && this.$route.query.processName;
      if (!this.definitionId) {
        this.$message.error('definitionId不能为空');
        return
      }

      if (!this.definitionId) {
        this.$message.error('processName不能为空');
        return
      }

      // 获取用户个人数据
      getUserProfile().then(response => {
        // 用户数据
        this.userData = response.data
        this.form.userId = this.userData.userId
        this.form.deptId = this.userData.deptId
        this.form.deptName = this.userData.dept.deptName
        this.form.userName = this.userData.nickName
        this.form.factoryId = this.userData.factoryId
        this.form.factoryName = this.userData.factory.factoryName
        this.initData();
      })
    }
  },
  methods: {
    initData() {
      // 发送请求，获取xml
      getBpmnXml(this.definitionId).then(response => {
        this.xmlData = response.data
      })
    },
    // 表单重置
    reset() {
      this.form = {
        riskId: null,
        deptId: null,
        userId: null,
        factoryId: null,
        deptName: null,
        userName: null,
        factoryName: null,
        definitionId: null,
        processId: null,
        processName: null,
        riskArea: '1',
        riskType: '1',
        riskLevel: null,
        completionTime: null,
        image: null,
        photo: null,
        schedule: null,
        remark: null,
        delFlag: null,
        createTime: null,
        updateTime: null
      }
      this.resetForm('form')
    },
    // 取消按钮
    cancel() {
      const obj = {path: "/work/risk"};
      this.$tab.closeOpenPage(obj);
    },
    /** 提交按钮 */
    submitForm(index) {
      this.$refs['form'].validate(valid => {
        if (valid) {
          if (this.disable) {
            return
          }
          if (index === 0) {
            this.form.schedule = 'unapproved'
          } else {
            this.form.schedule = 'running'
          }
          this.form.definitionId = this.definitionId
          this.form.processName = this.processName

          addRisk(this.form).then(response => {
            this.$modal.msgSuccess(`${this.form.schedule === 'unapproved' ? '保存' : '提交'}成功`)
            this.cancel()
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.form-conf {
  margin: 15px auto;
  width: 80%;
  padding: 15px;
}
</style>
